<template>
  <div>
    <div v-if="itemType != 'enterprise'">
    <router-link class="news-item" v-for="item in itemData" :key="item.id" :to="`/detail/${itemType}/${item.id}${articleType? '#' + articleType:''}`">
          <div class="new-left">
            <div class="new-title">
              {{item.title}}
            </div>
            <div class="new-info">
              {{item.synopsis}}
            </div>
          </div>
          <div class="new-right" :style="`background-image:url(${item.img})`">
          </div>
    </router-link>
    </div>
    <div v-if="itemType == 'enterprise'">
      <router-link class="news-item" v-for="item in itemData" :key="item.id" :to="`/infoMore/${itemType}/${item.id}`">
          <div class="new-left">
            <div class="new-title">
              {{item.title}}
            </div>
            <div class="new-info">
              {{item.synopsis}}
            </div>
          </div>
          <div class="new-right" :style="`background-image:url(${item.img})`">
          </div>
    </router-link>
    </div>
  </div>
</template>

<script>
export default {
  props: ['itemData', 'itemType', 'articleType']
}
</script>



<style lang="stylus">
  .news-item
    display flex
    justify-content space-between
    margin 20px
    border-bottom 1px solid #e8e8e8
    height 140px
    color #494949
    cursor pointer
    &:hover
      text-decoration none
      .new-title
          color #d3202a
    .new-left
      font-size 14px
      .new-title
        font-size 16px
        font-weight 500
        line-height 25px
        height 25px
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
      .new-info
        color #919191
        margin-top 2px
        font-size 14px
        line-height 20px
        height 84px
        overflow hidden
        text-overflow:ellipsis;
        text-align justify
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;

    .new-right
      width 200px
      margin-left 10px
      flex-shrink 0
      height 120px
      background-size cover
      img 
        height 100%

@media (max-width 765px)
  .news-item
    display block
    height auto
    padding-bottom 20px
    .new-title
      font-size 13px
    .new-right
      width 100%
      margin 0
      padding-bottom 60%
      height 0
    .new-left
      width: 100%;  
      .new-info
        max-height 84px
        height auto
        font-size 13px
        line-height 20px
        margin-bottom 5px
       
</style>

